<template>
  <div class="htmlBox">
    <div>
      <el-tabs type="border-card" v-model="activeName" style="height: 75vh" @tab-click="giveDate">
        <el-tab-pane v-for="date in lastWeekDates" :label="date" :key="date">

          <el-tooltip class="item" effect="dark" content="发现流浪动物?点击发求助贴" placement="right"
                      style="background-color: #f8bdbd;float: right">
            <el-button @click="edit(date)"><i class="el-icon-edit"></i></el-button>
          </el-tooltip>
          <div v-for="(rescue,index) in rescueDate" :key="index" style="padding: 20px"
               @click="learnMore(rescue.description)">
            <div style="display: flex">
              <div class="left">
                <el-avatar :src="'http://localhost:8080/yyj/files/'+rescue.avatar"></el-avatar>
                {{ rescue.name }}
              </div>
              <div class="right" style="margin-left: 45px">
                <div class="title">{{ rescue.title }}</div>
                <div class="content">{{ rescue.content }}</div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>
    <div>
      <div>
        <!-- 领养表单模态框 -->
        <el-dialog :visible="editDialog" title="提供流浪动物信息" @close="editDialog = false" width="50%">
          <el-form ref="Form" :model="Data">
            <el-form-item label="标题" label-width="15%">
              <el-input v-model="Data.title" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="大概内容" label-width="15%">
              <el-input v-model="Data.content" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="发现地点" label-width="15%">
              <el-input v-model="Data.discoverSpot" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" label-width="15%">
              <el-input v-model="Data.contact" style="width: 90%"></el-input>
            </el-form-item>

            <el-form-item label="详述" label-width="15%">
              <div id="editor" style="width: 90%"></div>
            </el-form-item>
          </el-form>
          <!-- 模态框的底部按钮 -->
          <span slot="footer" class="dialog-footer">
              <el-button type="warning" @click="editDialog = false">取消</el-button>
              <el-button type="primary" @click="submit()">提交</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="详情"
            :visible.sync="dialogVisible"
            width="60%">
          <div v-html="this.Adescription"></div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

  </div>
</template>


<script>
import request from "@/utils/request";
import E from 'wangeditor'

let editor

function initWangEditor(description) {
  setTimeout(() => {
    if (!editor) {
      editor = new E('#editor')
      editor.config.placeholder = '请输入内容';
      editor.config.uploadFileName = 'file';
      editor.config.uploadImgServer = "http://localhost:8080/yyj/files/wang/upload";
      editor.create();
    }
    editor.txt.html(description);
  }, 0);
}

export default {
  name: "SeekView",
  data() {
    return {
      lastWeekDates: [],
      editDialog: false,
      Data: {},
      today: '',
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {},
      rescueDate: [],
      Adescription: '',
      dialogVisible: false,
      activeName: '',
      selectDay: ''
    };
  },
  created() {
    this.calculateLastWeekDates();
    this.getTodaySeek(this.today);
  },
  methods: {
    giveDate() {
      const selectedDate = this.activeName;
      console.log('选中的日期：', selectedDate);
      const today = new Date();
      const date = new Date(today);
      date.setDate(today.getDate() - selectedDate);
      console.log(today.getDate());
      this.selectDay = date.toISOString().split('T')[0];
      console.log(this.selectDay);
      request.get("rescue/getRescue/" + this.selectDay).then(res => {
        if (res.code === '0') {
          this.rescueDate = res.data;
          this.getTodaySeek(this.today);
          window.location.reload();
        } else {
          this.$message.error(res.msg);
        }
      });
      //刷新

      // 然后你可以将日期发送到后端等操作
    },
    learnMore(description) {
      this.Adescription = description;
      this.dialogVisible = true;
    },
    getTodaySeek(today) {
      //得到今天的救助信息
      request.get("rescue/getRescue/" + today).then(res => {
        if (res.code === '0') {
          this.rescueDate = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    edit(date) {
      //编辑添加求助事件(新增)
      this.Data = {};
      this.Data.sendTime = date;
      this.Data.userId = this.user.userId;
      console.log(this.Data.userId);
      initWangEditor("");
      this.editDialog = true;
    },

    //提交求助信息
    submit() {
      this.Data.description = editor.txt.html();
      request.post("rescue/addRescue", this.Data).then(res => {
        if (res.code === '0') {
          this.$message.success("发布成功");
          this.editDialog = false;
        } else {
          this.$message.error(res.msg);
        }
      })

    },
    calculateLastWeekDates() {
      const today = new Date();
      const lastWeekDates = [];

      for (let i = 0; i < 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        if (i === 0) {
          this.today = date.toISOString().split('T')[0];
          console.log(this.today);
        }
        lastWeekDates.push(date.toISOString().split('T')[0]); // 格式化日期并存储在数组中
      }

      this.lastWeekDates = lastWeekDates; // 倒序排列日期
      console.log(lastWeekDates)
    },
  },


}
</script>

<style scoped>
.htmlBox >>> div {
  /*background-color: #fae2e2;*/
}

.two {
  padding: 50px;

}

.rescue-item {
  padding: 20px;
  display: flex;
  align-items: flex-start;
}


.right {
  flex-grow: 1;
}

.title {
  font-weight: bold;
}

.content {
  margin-top: 10px;
}


</style>